<template>
  <j-modal
    :maskClosable="lack == true ? false : true"
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @cancel="handleCancel"
    cancelText="关闭">
    <!--<a-modal
      :title="title"
      :width="1200"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">-->

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="栏目">
          <j-dict-select-tag v-decorator="['channelId', {}]" :triggerChange="true" dictCode="cms_channel"/>
        </a-form-item> -->

        <!--        <a-form-item-->
        <!--          :labelCol="labelCol"-->
        <!--          :wrapperCol="wrapperCol"-->
        <!--          label="栏目">-->
        <!--          <j-category-select pid="cms_channel_tree" pcode="cms_channel_tree" placeholder="请选择栏目"-->
        <!--                             v-decorator="['channelId', {}]" />-->
        <!--        </a-form-item>-->

        <div class="warningWord" v-if="lack == true">
          * 您有基础信息未完善，请先补全信息再进行操作！
        </div>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系人">
          <a-input placeholder="请输入联系人" v-decorator="['realname', { rules: [{ required: true, message: '请输入联系人' }]}]"
                   :readOnly="noEdit"
                   oninput="value=value.replace(/[, ]/g,'')"
                   onkeyup="value=value.replace(/[, ]/g,'')" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="手机号码">
          <a-input-number placeholder="请输入手机号码"
                          v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号' }]}]"
                          oninput="value=value.replace(/[, ]/g,'')"
                          onkeyup="value=value.replace(/[, ]/g,'')" style="width: 100%" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="电子邮箱">
          <a-input placeholder="请输入电子邮箱" v-decorator="['email', { rules: [{ required: true, message: '请输入电子邮箱' }]}]"
                   oninput="value=value.replace(/[, ]/g,'')"
                   onkeyup="value=value.replace(/[, ]/g,'')" />
        </a-form-item>


      </a-form>
    </a-spin>
    <template slot="footer">
      <a-button @click="handleLogout">退出登录</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </j-modal>
</template>

<script>
import pick from 'lodash.pick'
import moment from 'moment'
import { putAction, httpAction, postAction } from '@/api/manage'
import JUpload from '@/components/jeecg/JUpload'
import ARow from 'ant-design-vue/lib/grid/Row'
import JCategorySelect from '@/components/jeecg/JCategorySelect'
import JImageUpload from '@/components/jeecg/JImageUpload'
import { base64toBlob, blobToBase64, fileToBase64, fileToBlob } from '@/utils/dataTransform'
import user from '../../store/modules/user'
import { getAction } from '../../api/manage'
import Vue from 'vue'
import { USER_INFO, LACK, ROLE } from '@/store/mutation-types'
import { mapActions, mapGetters, mapState } from 'vuex'

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

export default {
  name: 'infoEdit',
  components: {
    ARow,
    JUpload,
    JCategorySelect,
    JImageUpload
  },
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [],
      isClear: false,
      detail: '',
      title: '修改个人信息',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      url: {
        edit: '/sys/user/edit'
      },
      userInfo: {},
      lack: '',
      role: '',
      noEdit: false
    }
  },
  mounted() {
    this.userInfo = Vue.ls.get(USER_INFO)
    this.lack = Vue.ls.get(LACK)
    this.role = Vue.ls.get(ROLE)
    if (this.role == 'district') {
      this.noEdit = true
    }
  },
  methods: {
    ...mapActions(['Logout']),
    handleLogout() {
      const that = this

      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk() {
          return that.Logout({}).then(() => {
            // update-begin author:wangshuai date:20200601 for: 退出登录跳转登录页面
            that.$router.push({ path: '/user/login' })
            // update-end author:wangshuai date:20200601 for: 退出登录跳转登录页面
            //window.location.reload()
          }).catch(err => {
            that.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel() {
        }
      })
    },
    getData() {
      getAction('/sys/user/queryById?id=' + this.userInfo.id).then(res => {
        this.model = res.result
        Vue.ls.set(USER_INFO, this.model)
        if (this.model.realname && this.model.phone && this.model.email) {
          Vue.ls.set(LACK, false, 7 * 24 * 60 * 60 * 1000)
        }
        this.lack = Vue.ls.get(LACK)
        this.$nextTick(() => {
          this.form.setFieldsValue({
            realname: this.model.realname,
            phone: this.model.phone,
            email: this.model.email
          })
        })
      })
    },
    add(record) {
      this.edit({})
    },
    edit() {
      this.form.resetFields()
      console.log(this.userInfo)
      this.visible = true
      this.getData()
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.fileList = []
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          httpurl += this.url.edit
          let formData = Object.assign(this.model, values)
          formData.id = this.userInfo.id

          postAction(httpurl, formData).then(res => {
            if (res.success) {
              that.$message.success(res.message)
              that.confirmLoading = false
              that.close()
              Vue.ls.set(LACK, 'false')
              that.$emit('refresh')
            } else {
              that.$message.error(res.message)
              that.confirmLoading = false
            }
          })

        }
      })
    },
    handleCancel() {
      if (this.lack !== true) {
        this.close()
      } else {
        this.$message.error('您有基础信息未完善，请先补全信息再进行操作！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
///deep/ .ant-modal-wrap .ant-modal{
//  width: 300px;
//  //margin-top: 200px  //height: 128px;
//}
///deep/ .ant-modal-root .ant-modal-wrap .ant-modal .ant-modal-content{
//  margin-top: 300px;
//}
.warningWord {
  color: red;
  //  水平居中
  text-align: center;
  margin-bottom: 20px;
}
</style>